<template>
  <view>
    <view class="ticket-picture">
      <view class="dianji">
        <view v-if="isHave" class="u-flex ticket-true">
          <view class="DJP">{{ticketType}}</view>
          <view class="explain">
            <view class="u-font-30 text-bold">¥{{price||0}}</view>
            <view class="u-font-26">{{pepleNum||0}}人已买</view>
            <button class="buy-ticket u-margin-top-10" @click="goBuyBill">购票</button>
          </view>
        </view>
        <view v-else class="u-flex ticket-false">
          <view class="DJP">{{ticketType}}</view>
          <view class="explain-false">
            <view class="u-font-36 text-bold">暂无</view>
            <view class="u-font-26" style="color:#666666;">尽情期待</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import settlement from '@/mixins/settlement.js'
export default {
  name: "ticket",
  mixins: [settlement],
  props: {
    ticketType: {
      type:String,
    },
    price: {
      type:[String,Number]
    },
    pepleNum: {
       type:[String,Number]
    },
    isHave:{
      type:Boolean
    },
    ticketId:{
      type:Number
    }
  },
 
  components: {},
  data() {
    return {
      apiModule: 'shopApi',
    };
  },
  created() {},
  methods: {
    goBuyBill(){
     	this.loginValidate().then(res => {
				this.settlement([{
					productId: this.ticketId,
					productNum: 1
				}])
			})
    }
  },
};
</script>

<style lang="scss" scoped>
.ticket-true {
  width: 290rpx;
  height: 160rpx;
  background-image: url("https://larp-gbo.oss-cn-chengdu.aliyuncs.com/larp/common-light/tiketBgColor.png");
  background-size: contain;
  position: relative;
  color: #765cfe;
  .explain {
    display: flex;
    flex-direction: column;
    justify-items: center;
    text-align: center;
    position: absolute;
    top: 10rpx;
    right: 36rpx;
  }
}

.ticket-false {
  width: 290rpx;
  height: 160rpx;
  background-image: url("https://larp-gbo.oss-cn-chengdu.aliyuncs.com/larp/common-light/tiketBg.png");
  background-size: contain;
  position: relative;
  .explain-false {
    display: flex;
    flex-direction: column;
    justify-items: center;
    text-align: center;
    position: absolute;
    top: 36rpx;
    right: 44rpx;
  }
}

.DJP,
.FXP {
  width: 28rpx;
  font-size: 28rpx;
  line-height: 28rpx;
  margin-left: 24rpx;
}

.buy-ticket {
  width: 124rpx;
  height: 44rpx;
  background-color: #765cfe;
  border-radius: 22rpx;
  font-size: 26rpx;
  color: #fff;
  line-height: 44rpx;
}
</style>
